<template>
  <div>
    <el-upload ref="upload" class="importPrice" :action="url" accept=".xlsx, .xls" :limit="1" :headers="headersObj(url)" :on-success="showErrorList" :on-exceed="handleExceed" :http-request="httpRequest">
      <div style="text-align: left;">
        <multiuse-button size="small" type="primary" plain>点击上传</multiuse-button>
        <div style="marginbottom: 5px;padding-top: 1rem;">
          <p>
            点击“
            <span style="color: red">选择</span>”按钮，选择要导入的xls文件。
          </p>
        </div>
      </div>
    </el-upload>
    <div style="padding-top: 3rem"></div>
    <div v-show="!hideErrorMsg">
      <BreakSpace label="错误信息" :containerStyle="{ marginBottom: '10px' }" />
      <FilterTable ref="table" :columns="columns" :dataSource="dataList" :datakey="'records'" :onColumnsChange="columns => (this.columns = columns)" :isPagination="false" :isSelectColumn="false" height="auto" :is-select-column="false">
      </FilterTable>
    </div>

    <div style="padding-top: 3rem"></div>
    <div :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }">
      <multiuse-button @click="closeDialog">关 闭</multiuse-button>
    </div>
  </div>
</template>
<script>
import { getToken, getAppId, getUserId } from '@/assets/js/auth';
import { downloadModel } from '@/api/claim/factory/CheckSheetMaintain';
import { exportExcelFile } from '@/utils';
import axios, { getConfigHeaders } from '@/api/fetch';

export default {
  props: {
    hideErrorMsg: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: ''
    }
  },
  // 获取审批单ID
  data() {
    return {
      headersObj: getConfigHeaders,
      errorList: [],
      exportLoading: false,
      columns: this.creatHeader(),
      dataList: [],
      type: false
    };
  },
  methods: {
    httpRequest(param) {
      let file = param.file;
      let form = new FormData();
      form.append('file', file);
      axios({
        method: 'post',
        url: this.url,
        data: form,
        headers: getConfigHeaders(this.url),
        onUploadProgress: progressEvent => {
          const complete = parseInt(((progressEvent.loaded / progressEvent.total) * 100) | 0, 10)
          // 重点二：onProgress()方法需要以上方接收的形参来调用
          // 这个方法有一个参数"percent"，给他进度值 complete 即可
          param.onProgress({ percent: complete })
        }
      }).then(res => {
        this.showErrorList(res);
      });
    },
    downloadTemplate() {
      this.$confirm('此操作将下载excel模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.exportLoading = true;
        downloadModel().then((res) => {
          console.log(res);
          exportExcelFile(res.data, '考核单导入模板');
          this.exportLoading = false;
        });
      });
    },
    showErrorList(response, file, fileList) {
      if (response.resultCode === 200) {
        this.dataList = response.data;
        this.type = true;
        if (!this.dataList) {
          this.$notify.success({ title: '提示信息', message: '导入完成!' });
          this.closeDialog();
        } else if (response.data.length === 0) {
          this.$notify.success({ title: '提示信息', message: '导入完成!' });
          this.closeDialog();
        } else {
          this.$notify.warning({ title: '提示信息', message: '导入失败,错误信息如下!' });
        }
      }
    },
    closeDialog() {
      if (this.type) {
        this.$emit('importclose');
      } else {
        this.$emit('close');
      }
    },
    handleExceed(files, fileList) {
      this.$message(`只能选择一个文件`);
    },
    //table表头和数据源
    creatHeader() {
      return [
        { title: '错误行数', dataIndex: 'row', sorter: true },
        { title: '错误信息', dataIndex: 'errorMsg', sorter: true },
      ];
    },
  },
};
</script>
<style lang="less" scoped></style>>
